<template>
  <Modal v-model="open" :closeOnMask="false" hasDivider hasCloseIcon>
    <div slot="header">部门管理</div>
    <div>
      <Form :model="form" :rules="rules" mode="twocolumn" ref="form">
        <FormItem label="父级机构" prop="psn" :required="form.sn!='0001'">
          <TreePicker :option="branchOption" filterable v-model="form.pid" style="width:100%"></TreePicker>
        </FormItem>
        <FormItem label="内部编码" prop="sn" readonly>
          <input type="text" v-model="form.sn" readonly/>
        </FormItem>
        <FormItem label="机构代码" prop="code" required>
          <input type="text" v-model="form.code"/>
        </FormItem>
        <FormItem label="名称" prop="name" required>
          <input type="text" v-model="form.name"/>
        </FormItem>
        <FormItem label="全称" prop="fullName" required>
          <input type="text" v-model="form.fullName"/>
        </FormItem>
        <FormItem label="类型" prop="type" required>
          <Select v-model="form.type" dict="BranchType" filterable></Select>
        </FormItem>
        <FormItem label="负责人" prop="leader">
          <input type="text" v-model="form.leader"/>
        </FormItem>
        <FormItem label="联系电话" prop="phone">
          <input type="text" v-model="form.phone"/>
        </FormItem>
        <FormItem label="电子邮箱" prop="email">
          <input type="text" v-model="form.email"/>
        </FormItem>
        <FormItem label="传真" prop="fax">
          <input type="text" v-model="form.fax"/>
        </FormItem>
        <FormItem label="联系地址" prop="address">
          <input type="text" v-model="form.address"/>
        </FormItem>
        <FormItem label="备注信息" prop="remark">
          <input type="text" v-model="form.remark"/>
        </FormItem>
        <FormItem label="邮政编码" prop="zipcode">
          <input type="text" v-model="form.zipcode"/>
        </FormItem>
<!--        <FormItem label="加分" prop="jf">-->
<!--          <input type="text" v-model="form.jf"/>-->
<!--        </FormItem>-->
      </Form>
    </div>
    <div slot="footer">
      <Button @click="open=false">取消</Button>
      <Button :loading="loading" color="primary" @click="saveOrUpdate">确认</Button>
    </div>
  </Modal>
</template>
<script>
import {DataSource, ajax, util} from 'framework'

export default {
  name: 'BranchDialog',
  data: function () {
    return {
      open: false,
      loading: false,
      isAdd: false,
      form: {
        sn: null,
        psn: null,
        code: null,
        name: null,
        fullName: null,
        type: null,
        leader: null,
        phone: null,
        email: null,
        fax: null,
        address: null,
        remark: null,
        zipcode: null,
        jf: null,
      },
      branchOption:{
        keyName: 'id',
        parentName: 'pid',
        titleName: 'name',
        dataMode: 'list',
        datas:[]
      },
      //验证规则
      rules: {}
    }
  },
  mounted(){
    ajax.get("branch/list").then(r=>{
      this.branchOption.datas=r.data;
    })
  },
  methods: {
    show(primary) {
      this.loading = true
      util.clean(this.form)
      if (primary) {//show edit
        this.isAdd = false
        ajax.get("branch/detail", primary).then(r => {
          this.form = r.data
          this.loading = false;
          this.open = true;
        })
      } else {
        this.isAdd = true
        //show add

        this.open = true
        this.loading = false
      }
    },
    saveOrUpdate() {
      var validResult = this.$refs.form.valid();
      if (validResult.result) {
        this.loading = true
        ajax.post(this.isAdd ? 'branch/add' : 'branch/save', this.form).then(r => {
          this.open = false;
          this.$Message("已保存")
          this.$emit("change", r.data)
        }).catch(e => {
          this.loading = false
          this.$Message(r.message)
        })
      }
    }
  }
}
</script>
